/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin, Row, Col, Divider } from 'antd';
import { ThreeHeaderC, IconC } from '../../../components';
import style from './index.less';

class Info extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, args } = this.props;
    this.getData(args);
  }

  componentDidUpdate(prevProps) {
    const { args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      this.getData(args);
    }
  }

  getData = (data) => {
    this.props.dispatch({
      type: 'yieldPerformanceM/getPortfolioInfo',
      payload: data,
    });
  };

  // 数字处理成千分位
  changeNumber = (e) => {
    const num = e?.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return num;
  };

  record = (row, name) => {
    return (
      <div className='infoStyle'>
        <span>{`${name}${row.endDate ? `(${row.endDate})` : ''}`}</span>
        <span className={row.yield >= 0 ? 'rednumber' : 'grenumber'}>{`${this.changeNumber(row.yield || 0)}`}</span>
        {row.yieldFlag ? row.yieldFlag == 'up' ? <IconC type={'upArrowRed'} iconType={'original'} /> : <IconC type={'downArrowGreen'} iconType={'original'} /> : null}
        {row.yieldDesc ? <span className={row.yieldFlag == 'up' ? 'rednumber' : 'grenumber'}>{`(${row.yieldDesc})`}</span> : null}
      </div>
    );
  };

  // 组合
  showPortfolio = () => {
    const { PortfolioInfo } = this.props.yieldPerformanceM;
    const productYield = PortfolioInfo?.productYield;
    const portfolioYield = PortfolioInfo?.portfolioYield;

    return (
      <div style={{ height: '30px' }}>
        <Row>
          <Col span={11} style={{ textAlign: 'center' }}>
            {productYield && this.record(productYield, '产品收益率')}
          </Col>
          <Col span={1}>
            <Divider type='vertical' />
          </Col>
          <Col span={11} style={{ textAlign: 'center' }}>
            {portfolioYield && this.record(portfolioYield, '组合收益率')}
          </Col>
        </Row>
      </div>
    );
  };

  showYields = () => {
    const { PortfolioInfo } = this.props.yieldPerformanceM;
    const yieldList = PortfolioInfo?.yieldList || [];

    return (
      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        {yieldList.map((row, index) => {
          return (
            <div key={index}>
              <div style={{ padding: 15, display: 'flex', height: '90px', alignItems: 'flex-end', minWidth: '180px', maxWidth: '240px' }}>
                <IconC type={'incomeRate'} style={{ width: '30px', height: '40px' }} />
                <div style={{ textAlign: 'right', flex: 'auto' }}>
                  <p className='range'>{row.range}</p>
                  <p className='value'>{Number(row.value).toFixed(2)}%</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };

  render() {
    const { loading, portfolioName } = this.props;
    return (
      <div className={style.info}>
        <Spin spinning={loading.effects['yieldPerformanceM/getPortfolioInfo'] == true}>
          <div className='info1' style={{ marginTop: '10px' }}>
            {this.showPortfolio()}
          </div>
          <div style={{ marginTop: '10px' }}>
            <ThreeHeaderC title='收益率' />
          </div>
          <div className='yields' style={{ marginTop: '10px' }}>
            {this.showYields()}
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(Info);
